<template>
  <card class="insure-card" title="里程更新记录" :showDivider="false">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData" />
  </card>
</template>

<script setup>
  import { onMounted, reactive, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { carMileageRecordDetail } from '@/api/asset/car'
  import { useRoute } from 'vue-router'
  import { usePageDict } from '@/hooks/useDict'
  const route = useRoute()

  const carManageDict = usePageDict('carManageDict')

  // 查询条件
  const queryParam = reactive({})
  const dateTimeAttrs = {
    type: 'i-range-picker',
    attrs: {
      showTime: true,
      timePickerProps: {
        defaultValue: ['00:00:00', '23:59:59'],
      },
    },
  }

  const searchList = computed(() => {
    return [
      {
        label: '更新时间',
        prop: 'updateTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.updateTimeStart = value[0]
          queryParam.updateTimeEnd = value[1]
        },
      },
      { label: '业务类型', prop: 'businessType', placeholder: '请选择', type: 'a-select', options: carManageDict.businessTypeList },
      { label: '更新事件', prop: 'event', placeholder: '请选择', type: 'a-select', options: carManageDict.eventList },
    ]
  })

  const table = useTable({
    columns: [
      { title: '更新时间', dataIndex: 'refTime' },
      { title: '业务类型', dataIndex: 'refTypeName' },
      { title: '关联单号', dataIndex: 'refCode' },
      { title: '更新事件', dataIndex: 'refStatusName' },
      { title: '更新里程数', dataIndex: 'mileage', unit: '公里' },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParam, carMileageRecordDetail)

  onMounted(() => {
    if (route.params) {
      console.log(route.params)
      queryParam.id = route.params.id
      loadData()
    }
  })
</script>
<style lang="less" scoped></style>
